<template>
  <el-table :data="showData"  v-loading="loading">
    <el-table-column label="书名" prop="name" >
      <template #default="scope">
        <span v-html="brightenTotalKeyword(scope.row['name'])"></span>
      </template>
    </el-table-column>
    <el-table-column label="ISBN" prop="isbn"/>
    <el-table-column label="借书时间" prop="begin" />
    <el-table-column label="还书时间" prop="end">
      <template #default="scope">
        <span v-show="scope.row['returned'] === NOT_RETURNED
        || (scope.row.end === null || scope.row.end.length <= 1)" style="color: red">暂未归还</span>
        <span v-show=" scope.row['returned'] === RETURNED
        || (scope.row.end !== null && scope.row.end.length >= 2)">{{ scope.row.end }}</span>
      </template>
    </el-table-column>
    <el-table-column label="罚款" prop="punish">
      <template #default="scope">
        <el-tag :type="scope.row['punish'] === 0 ? 'primary' : 'danger'">
          {{ scope.row['punish'] === 0 ? "暂无" : scope.row['punish'] }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="searchKeyWord" size="small" placeholder="按书名进行搜索" @input="searchFunc" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="showInfo(scope.$index)">
          查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="drawer" direction="rtl">
    <template #header>
      <h4>借阅详情</h4>
    </template>
    <template #default>
      <el-descriptions
          class="margin-top"
          :column="1"
          size="large"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <user />
              </el-icon>
              书名
            </div>
          </template>
          {{ readHistory[showIndex]['name'] }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              ISBN
            </div>
          </template>
          {{ readHistory[showIndex]['isbn'] }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              借阅时间
            </div>
          </template>
          <el-tag size="large" type="primary">{{ readHistory[showIndex]['begin'] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              还书时间
            </div>
          </template>
          <el-tag v-show="readHistory[showIndex]['returned'] === NOT_RETURNED
        || (readHistory[showIndex]['end'] === null || readHistory[showIndex]['end'].length <= 1)" size="large" type="danger">暂未归还</el-tag>
          <el-tag v-show=" readHistory[showIndex]['returned'] === RETURNED
        || (readHistory[showIndex]['end'] !== null && readHistory[showIndex]['end'].length >= 2)" color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ readHistory[showIndex]['end'] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <office-building />
              </el-icon>
              归还状态
            </div>
          </template>
          <el-tag v-show="readHistory[showIndex]['returned'] === NOT_RETURNED
        || (readHistory[showIndex]['end'] === null || readHistory[showIndex]['end'].length <= 1)" size="large" type="danger">暂未归还</el-tag>
          <el-tag v-show=" readHistory[showIndex]['returned'] === RETURNED
        || (readHistory[showIndex]['end'] !== null && readHistory[showIndex]['end'].length >= 2)" color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">已归还</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              该书最大借阅时间
            </div>
          </template>
          <el-tag color="#f0f9eb" style="color: #7dc28a;border: #b3e19d">{{ readHistory[showIndex]['max'] }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              应借阅超时而引起的罚款
            </div>
          </template>
          <el-tag v-show="readHistory[showIndex]['punish'] <= 0" type="primary">无</el-tag>
          <el-tag v-show="readHistory[showIndex]['punish'] > 0" type="danger">{{ readHistory[showIndex]['punish'] }}元</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button v-show="drawer && readHistory[showIndex]['returned'] === NOT_RETURNED"
                   type="primary" plain @click="returnBook">
          还书
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
// eslint-disable-next-line no-unused-vars
const RETURNED = "0"
// eslint-disable-next-line no-unused-vars
const NOT_RETURNED = "1"
</script>
<script>
import {post, TIME_SPLIT} from "@/http";
import { ElMessage  } from "element-plus"
import router from "@/router";
export default {
  name: "ReaderHistory",
  data(){
    return{
      id: "",
      searchKeyWord: "",
      showData: [],
      readHistory: [],
      drawer: false,
      showIndex: 0,
      loading: false
    }
  },
  methods:{
    get_info(){

      const source = window.sessionStorage.getItem("Id")
      if(source == null){
        ElMessage.error("请先登录")
        router.push('/Login')
      }else{
        const begin = source.split(';')[1]
        const now = new Date().getDate()
        if(now - Number(begin) > TIME_SPLIT){
          ElMessage.error("登录信息失效,请重新登录")
          router.push("/Login")
        }else{
          this.loading = true
          this.id = source.split(';')[0]
          let params = new URLSearchParams()
          params.append("id", this.id)
          post("/api/reader/someReader", params).then(res=>{
            if(res.data.code !== 200){
              ElMessage.error("服务器请求数据错误,请尝试重新登录")
              router.push("/Login")
            }else{
              if(res.data.data === null){
                ElMessage.error("服务器上找不到该用户,请尝试重新登录或注册")
                router.push("/Login")
              }
            }
            this.loading = false
          })
        }
      }
    },
    showInfo(index){
      this.showIndex = index
      this.drawer = true
    },
    searchFunc() {
      this.showData = []
      if (this.searchKeyWord.length === 0) {
        this.showData = this.readHistory
      } else {
        this.readHistory.forEach(item => {
          if (item['name'] != null && item['name'].indexOf(this.searchKeyWord) !== -1)
            this.showData.push(item)
        })
      }
    },
    brightenTotalKeyword(val) {
      const Reg = new RegExp(this.searchKeyWord, 'gi');
      let res = '';
      if (val) {
        res = val.replace(Reg, `<span style="color: #cc0000;">${this.searchKeyWord}</span>`);
        return res;
      }
    },
    init(){
      this.loading = true
      post("/api/reader/getHistory", { "id": this.id }).then(res=>{
        if(res.data.code === 200){
          this.readHistory = res.data.data
          this.showData = this.readHistory
        }else{
          ElMessage.error("接口请求失败,请尝试重新登录")
          router.push("/Search")
        }
        this.loading = false
      })
    },
    returnBook(){
      this.loading = true
      post("/api/reader/returnBook", {
        "id": this.id,
        "isbn": this.readHistory[this.showIndex]['isbn']
      }).then(res=>{
        if(res.data.code !== 200){
          ElMessage.error(res.data.message)
        }else{
          ElMessage.success(res.data.message)
        }
        this.loading = false
        this.drawer = false
        this.init()
      })
    }
  },
  created(){
    this.get_info()
    this.init()
  }
}
</script>

<style scoped>

</style>